{block content}
<div class="contentBox productListTitle">
    <h1 n:block="title">{$categoryName}</h1>
</div>
<script type="text/javascript">
function toggleDetail(prod)
{
    var prodElement = $(prod).closest('.product');
    if (prodElement.hasClass('productDetail'))
    {
        prodElement.removeClass('productDetail');
        prodElement.animate({ width: 391, height: 162, 'margin-left': 0}, 200);
    }
    else
    {
        var target = { width: 825, height: 342};
        if (prodElement.hasClass('even'))
        {
            target['margin-left'] = -434;
        }
        prodElement.addClass('productDetail');
        prodElement.animate(target, 200);
    }
}
</script>
<div class="productList">
    {foreach $products as $product}
    <div class="productSizeWrapper {if $iterator->odd}odd{else}even{/if}">
        <div class="product {if $iterator->odd}odd{else}even{/if}">
            <div class="productImg">
                <img style="cursor:pointer" onclick="toggleDetail(this);" class="" src={if file_exists(WWW_DIR.'/images/products/pr-'.$product['id_product'].'.jpg')}
                "{$basePath}/images/products/pr-{$product['id_product']}.jpg"
                {else}
                "{$basePath}/images/productDummy.jpg"
                {/if} alt="{$product['name']}">
            </div>
            <div class="productImgDetail">
                <img style="cursor:pointer" onclick="toggleDetail(this);" class="" src={if file_exists(WWW_DIR.'/images/products/prDetail-'.$product['id_product'].'.jpg')}
                "{$basePath}/images/products/prDetail-{$product['id_product']}.jpg"
                {else}
                "{$basePath}/images/productDummyDetail.jpg"
                {/if} alt="{$product['name']}">
            </div>
            <div class="productInfo">
                <div class="productInfoMain ellipsis">
                    <h2 style="cursor:pointer" onclick="toggleDetail(this);">{$product['name']}</h2>
                    <p class="description ellipsis">{$product['description']}</p>
                    <p class="perex ellipsis">{$product['perex']}</p>
                </div>
                <p class="price">Cena: <strong>{$product['price']|price}</strong> czk<br />
                s DPH: {$product['price']*$dph|number:0:'.':''|price} czk</p>
                <p class="buy"><a n:href="Contact:default $product['id_product']">Objednat</a></p>
            </div>
        </div>
    </div>
    {/foreach}
    <div class="cleaner"></div>
</div>